<template>
  <div class="custom-body-content" :style="bodyStyle">
    <div class="office-hall-header" :style="bodyStyle">
      <el-image lazy :src="entity.backImage" />
      <div class="office-hall-bt">
        <div class="office-hall-custom">
          <div class="office-hall-h1">{{ entity.name }}</div>
          <div class="office-hall-p">
            {{ entity.summary }}
          </div>
        </div>
      </div>
    </div>
    <div class="office-hall-content" :style="bodyStyle">
      <div class="office-hall-half" :style="bodyStyle">
        <div class="office-hall-line" :style="bodyStyle">
          服务列表
        </div>
        <div class="office-hall-body">
          <div
            v-for="(item, index) in servers"
            :key="'server-' + index"
            :class="
              item.service !== undefined &&
                item.service.id === rightEntity.service.id
                ? 'active'
                : ''
            "
            class="office-hall-li"
            @click="change(item)"
          >
            <div class="office-hall-active" />
            <div class="office-hall-li-content">
              <div class="office-hall-image">
                <el-image :src="item.service.pcIcon" />
              </div>
              <div class="office-hall-li-title">
                {{ item.service.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="office-hall-line" :style="bodyStyle">
          资料下载
        </div>
        <div class="office-hall-download" :style="bodyStyle">
          <div
            v-for="(item, index) in fjList"
            :key="'fj-' + index"
            class="office-file-li"
            :style="bodyStyle"
          >
            <el-card shadow="hover" :style="bodyStyle">
              <div class="li-content" @click="download(item)">
                <div class="custom-image"><el-image :src="getSrc(item)" /></div>
                <div class="lin-title">{{ item.fileName }}</div>
                <div class="lin-size">{{ item.size }}</div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div
        v-if="rightEntity.service"
        class="office-hall-half"
        :style="bodyStyle"
      >
        <div class="office-hall-line">
          <div class="hall-line-left" :style="bodyStyle">
            {{ rightEntity.service.name }}
          </div>
          <div
            v-if="guest === false"
            class="hall-line-right"
            :style="bodyStyle"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="openObject"
            >开始办理</el-button>
          </div>
        </div>
        <div class="right-body" style="width: 100%;margin-top: 10px">
          <el-tabs :tab-position="'right'" style="min-height: 300px">
            <el-tab-pane label="服务说明" v-html="rightEntity.service.fwsm" />
            <el-tab-pane label="注意事项" v-html="rightEntity.service.zysx" />
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { queryEntity, queryGuestEntity } from '@/api/yslb/index';
export default {
  name: 'ServerEntityV2', // 一事联办详情页面
  props: {
    params: {
      type: Array
    },
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      doc: require('@/assets/images/doc.png'),
      eps: require('@/assets/images/eps.png'),
      excel: require('@/assets/images/excel.png'),
      gif: require('@/assets/images/gif.png'),
      pdf: require('@/assets/images/pdf.png'),
      ppt: require('@/assets/images/ppt.png'),
      txt: require('@/assets/images/txt.png'),
      zip: require('@/assets/images/zip.png'),
      bak3: require('@/assets/images/003.png'),
      dataList: [],
      queryParameter: {},
      queryData: [],
      enclosureList: [],
      setting: {},
      tid: null,
      entity: {},
      fjList: [],
      servers: [],
      guest: true,
      rightEntity: {},
      bodyStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        this.dataList = [];
        this.queryParameter = Object.assign({});
        this.queryData = [];
        this.enclosureList = [];
        if (undefined !== newName.pzx && newName.pzx !== null) {
          this.setting = JSON.parse(newName.pzx);
          this.dataList = this.setting.data;
        }
        this.tid = newName.id;
        if (getToken()) {
          this.guest = false;
        }
        this.initEntity();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          this.bodyStyle.background = val.columnGroundColor;
          this.bodyStyle.color = val.fontColor;
          // this.bodyStyle.border = "1px solid " + val.columnTitleGroundColor;
          // this.borderStyle.background = val.columnGroundColor;
          // this.borderStyle.color = val.fontColor;
          this.bodyStyle = Object.assign({}, this.bodyStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    this.$store
      .dispatch('GetThemes')
      .then(res => {
        return true;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    change(data) {
      this.rightEntity = data;
    },
    openEntity(item) {
      window.open(item.service.openUrl);
    },
    openObject() {
      if (this.rightEntity.service !== undefined) {
        window.open(this.rightEntity.service.openUrl, '_blank');
      }
    },
    download(item) {
      window.open(item.url, '_blank');
    },
    getSrc(item) {
      if (item.suffix === 'doc' || item.suffix === 'docx') {
        return this.doc;
      }
      if (item.suffix === 'xls' || item.suffix === 'xlsx') {
        return this.excel;
      }
    },
    initEntity() {
      const query = {};
      if (this.params !== null && this.params.length > 0) {
        this.params.forEach(item => {
          query[item.code] = item.value;
        });
      }
      if (getToken()) {
        queryEntity(query).then(res => {
          const { data } = res;
          this.entity = data.entity;
          this.fjList = data.fjList;
          this.servers = data.servers;
          if (data.servers !== null && data.servers.length > 0) {
            this.rightEntity = data.servers[0];
          }
        });
      } else {
        queryGuestEntity(query).then(res => {
          const { data } = res;
          this.entity = data.entity;
          this.fjList = data.fjList;
          if (data.servers !== null && data.servers.length > 0) {
            this.rightEntity = data.servers[0];
          }
          this.servers = data.servers;
        });
      }
    }
  }
};
</script>

<style scoped>
.custom-body-content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 5px;
  box-sizing: border-box;
}

.office-hall-header {
  flex: 0 1 auto;
  width: 100%;
  height: 385px;
  position: relative;
}
.office-hall-bt {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}

.office-hall-header .el-image {
  width: 100%;
  height: 100%;
}

.office-hall-content {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.office-hall-half {
  width: 50%;
  height: 100%;
  flex: 0 1 auto;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}

.office-hall-line {
  width: 100%;
  height: 50px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  font-size: 20px;
  font-weight: bold;
  line-height: 50px;
  text-indent: 20px;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.hall-line-left {
  flex: 1 1 auto;
}
.hall-line-right {
  flex: 0 1 auto;
  width: 140px;
  text-align: center;
}
.office-hall-body {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  margin-bottom: 10px;
  margin-top: 10px;
}
.office-hall-li {
  width: 20%;
  height: 100px;
  position: relative;
  padding: 10px 0px;
  box-sizing: border-box;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
.office-hall-li-content {
  width: 100px;
  margin: 0 auto;
  height: 80px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.office-hall-li:hover,
.office-hall-li.active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.office-hall-li:hover .office-hall-active,
.office-hall-li.active .office-hall-active {
  display: block;
}
.office-hall-active {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 2px;
  background-color: #00a0e9;
  display: none;
}
.office-hall-image {
  width: 100%;
  height: 40px;
  padding: 0px 25px;
  box-sizing: border-box;
}
.office-hall-li-title {
  height: 30px;
  font-size: 13px;
  vertical-align: middle;
  display: table-cell;
  padding-top: 4px;
  box-sizing: border-box;
  text-align: center;
}
.office-hall-download {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
}

.office-file-li {
  width: 33.333%;
  flex: 0 1 auto;
  height: 80px;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.li-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.custom-image {
  flex: 0 1 auto;
  width: 60px;
  height: 60px;
}
.lin-title {
  flex: 1 1 auto;
  height: 60px;
  line-height: 60px;
}
.lin-size {
  flex: 0 1 auto;
  height: 60px;
  width: 50px;
  font-size: 13px;
  color: #909399;
  line-height: 96px;
  text-align: center;
}

.office-hall-image .el-image {
  width: 100%;
  height: 100%;
}
.office-hall-custom {
  width: 100%;
  height: 100%;
  padding: 89px;
  box-sizing: border-box;
}
.office-hall-h1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 6px;
}
.office-hall-p {
  line-height: 30px;
  text-indent: 30px;
  margin-top: 30px;
  width: 50%;
  color: #fff;
  font-weight: 580;
}
.right-body {
  width: 100%;
  height: auto;
}
</style>
